<template>
  <div class="login-container">
     <header></header>
     <main>
         <div>       
        <div><span>+86</span><i class="yo-ico">&#xe60e;</i> 
        <input type="text" @focus="handlefocus" v-model="tel"   placeholder="请输入手机号">
         </div>
        <div><input :value="num" placeholder="请输入验证码" type="text"><span @click="clicktel">获取验证码</span></div>     
         </div>
         <div class="btn">
             <button @click="handleclick">登录</button>
             <p><span>账户密码登录</span> <router-link tag="span" to="/register" >新用户注册</router-link></p>
         </div>
          <van-popup v-model="show1"  
  :style="{ height: '10%',width:'50%',background:'#666',color:'white' }"  :overlay="false">
    {{alertfont}}
    </van-popup>
     </main>
  </div>
</template>

<script>
export default {
data () {
  return {
          show1:false,
          num:'',
          isactive:true,
          tel:'',
          alertfont:'手机格式不正确，请重新输入',
  }
},
methods: {
  clicktel(){
     if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.tel))){ 
           this.show1=true 
    }  else{
        this.num=1415666  
      //  this.isactive=false
    }
  },
   handleclick(){
     if(this.tel==this.$route.query.phone){
       this.$router.push('/Home')
        this.$store.state.islogin=true  
     }else{
       this.show1=true
       this.alertfont="密码或账号不正确"
     }
     
   },
     handlefocus(){
    this.show1=false
  },
},
mounted () {
    
}

}
</script>

<style lang="stylus" scoped>
.login-container
 height 100%
 width 100%
 background white
 header 
  height 2rem
  background-image url('http://gw.alicdn.com/tfs/TB1QfeUQAvoK1RjSZFDXXXY3pXa-300-138.png')
  background-repeat no-repeat
  background-position top 0.6rem left 2.5rem
  background-size   2.4rem 1.2rem
 main 
  div
   height 2.436rem
   width 100%
   padding 0 0.4rem 0.4rem
   font-size 0.28rem
   margin-top 0.4rem
   >div:first-child
    width 100%
    height 0.84rem
    border-bottom 1px solid #e7e7e7
    line-height 0.84rem
    span
        width 1.4rem
        padding-left 0.2rem
        font-size 0.28rem
    i 
        color #e7e7e7   
        border-right 1px solid #e7e7e7 
        padding 0 0.1rem
    input
        border none
        text-indent 0.1rem
   >div:last-child
     width 100%
     height 0.84rem
     display flex
     justify-content space-between  
     align-items center
     margin-top 0.2rem
     border-bottom 1px solid #e7e7e7
     input
       border none
       margin-top 0.3rem
     span 
      display inline-block
      font-size 0.24rem
      border-radius 0.2rem
      height 0.4rem 
      padding 0 0.1rem
      margin-top 0.3rem
      background #fff1f6
      color #fc347b
   
  .btn
    button 
     height 0.84rem
     background #ff1268
     width 100%
     border none
     border-radius 0.1rem
     font-size 0.36rem
     color white
    p
     display flex
     justify-content space-between
     font-size 0.24rem
     color #999
     margin-top 0.1rem

  
        
          
       
      
</style>